import { Form, Input, Modal, ModalProps } from '@arco-design/web-react'
import React from 'react'

export interface IAddGroupModalProps {
    // 点击确定按钮时
    onOk?: (values: { name: string }) => void
    // 初始值
    initialValues?: { name?: string }
}

const AddGroupModal: React.FC<
    IAddGroupModalProps & Omit<ModalProps, 'onOk'>
> = ({ onOk, onCancel, initialValues, ...props }) => {
    const [form] = Form.useForm()

    // 点击确定时
    const handleOk = () => {
        form.validate().then((values) => {
            onOk?.(values)
            form.resetFields()
        })
    }

    // 关闭后
    const handleCancel = () => {
        form.resetFields()
        onCancel?.()
    }

    return (
        <Modal
            title='添加分组'
            onOk={handleOk}
            onCancel={handleCancel}
            {...props}
        >
            <Form form={form} initialValues={initialValues} onSubmit={handleOk}>
                <Form.Item
                    label='名称'
                    field='name'
                    rules={[{ required: true }]}
                >
                    <Input placeholder='请输入名称' />
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default AddGroupModal
